<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - eBusiness</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/slider.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="slider-container">
        <div class="slides">
            <img th:src="@{/images/1.jpg}" alt="Slide 1" class="slide active">
            <img th:src="@{/images/2.png}" alt="Slide 2" class="slide">
            <img th:src="@{/images/3.png}" alt="Slide 3" class="slide">
        </div>
        <div class="navigation-arrows">
            <span class="prev-arrow">&#10094;</span>
            <span class="next-arrow">&#10095;</span>
        </div>
        <div class="pagination-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>
    </div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <h2>我的订单</h2>
        <p th:if="${message}" style="color: green;" th:text="${message}"></p>
        <p th:if="${error}" style="color: red;" th:text="${error}"></p>

        <div th:if="${#lists.isEmpty(orders)}" class="empty-message">
            <p>您还没有任何订单。</p>
        </div>

        <div th:unless="${#lists.isEmpty(orders)}" class="order-list-container">
            <table class="order-list-table">
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>订单金额</th>
                        <th>订单状态</th>
                        <th>下单时间</th>
                        <th>查看详情</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="order : ${orders}">
                        <td th:text="${order.id}"></td>
                        <td th:text="${order.amount}"></td>
                        <td>
                            <span th:text="${order.status == 0 ? '待支付' : '已完成'}"></span>
                        </td>
                        <td th:text="${#temporals.format(order.orderdate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a th:href="@{/order/detail/{orderId}(orderId=${order.id})}" class="btn btn-info btn-sm">查看详情</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>
</body>
</html> 